<template>
	<div id="box">
		<el-tabs type="border-card">
		<el-tab-pane label="职位查询">
			<el-form :inline="true" :model="seach" class="demo-form-inline">
			<el-form-item label="职位" prop="job_name">
			<el-select v-model="seach.name" placeholder="选择职位">
			<el-option v-for='(item,index) in jobSelect' :label="item.name" :value="item.name" :key='index'></el-option>
			</el-select>
			</el-form-item>
			<el-form-item>
			<el-button type="primary" @click="onSeach">查询</el-button>
			</el-form-item>
			</el-form>
			<el-table
			:data="jobData"
			border
			style="width: 100%">
			<el-table-column
			prop="name"
			label="职位">
			</el-table-column>
			<el-table-column
			prop="remark"
			label="备注"
			width="400">
			</el-table-column>
			<el-table-column
			prop="create_by"
			label="创建人">
			</el-table-column>
			<el-table-column
			prop="create_time"
			label="创建时间">
			</el-table-column>
			<el-table-column
			prop="store_name"
			label="部门">
			</el-table-column>
			<el-table-column
			prop="count"
			label="员工人数">
			</el-table-column>
			<el-table-column label="操作" width="160">
      		<template slot-scope="scope">
       	 	<el-button
          	size="mini"
          	@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        	<el-button
          	size="mini"
          	type="danger"
          	@click="handleDelete(scope.$index, scope.row)">删除</el-button>
      		</template>
    		</el-table-column>
			</el-table>
			<el-pagination
			background
			:page-size='5'
			:hide-on-single-page='true'
			layout="prev, pager, next"
			@current-change="getpage"
			:total="dataCount">
			</el-pagination>
		</el-tab-pane>
		<el-tab-pane label="添加">
			<add></add>
		</el-tab-pane>
		</el-tabs>
		<el-drawer
  			:visible.sync="drawer"
  			:direction="direction"
  			:before-close="handleClose"
  			:wrapperClosable='false'
  			size='64%'>
  			<edit :edit-data='editData' @text='change'></edit>
		</el-drawer>
	</div>
</template>
<script>
	import edit from '@/components/houtai/Jobedit'
	import add from '@/components/houtai/Addzw'
	import {mapGetters,mapActions,mapState} from 'vuex'
	export default{
		name:'job',
		components:{
			edit,
			add
		},
		data(){
			return{
				// jobData:[
				// 	{name:'服务员',remark:'服务员是干什么的',create_name:'张三',create_time:'2020/3/27',store_name:'一部',staff_sun:'10'},
				// 	{name:'厨师',remark:'厨师是干什么的',create_name:'张三',create_time:'2020/3/27',store_name:'清洁部',update_time:'2020/3/27',staff_sun:'15'},
				// 	{name:'收银员',remark:'服务员是干什么的服务员是干什么的服务员是干什么的服务员是干什么的',create_name:'张三',store_name:'二部',update_name:'王五',create_time:'2020/3/27',staff_sun:'5'},
				// 	{name:'点菜员',remark:'服务员是干什么的',create_name:'张三',create_time:'2020/3/27',store_name:'一部',update_time:'2020/3/27',staff_sun:'11'},
				// 	{name:'洗碗工',remark:'服务员是干什么的',create_name:'张三',create_time:'2020/3/27',store_name:'保安部',update_time:'2020/3/27',staff_sun:'13'},
				// ],
				drawer:false,
				direction:'btt',
				editData:{},
				zhixiang:{}
			}
		},
		methods:{
			...mapActions(['actGetJobData','delJob']),
			handleEdit(index,row){
				this.drawer = true
				let obj = {}
				for(let key in row){
					obj[key] = row[key]
				}
				this.zhixiang = row //为了方便修改表中的数据 在判断修改成功后需要用到
				this.editData = obj
			},
			handleDelete(index,row){
				console.log(row)
				if(row.count > 0){
					this.$message({
            				showClose: true,
            				message: '不能删除，人数不为零',
            				type: 'info'
        				});
				}else{
					this.delJob(row.name).then(res=>{
						if(res==='200'){
							this.$message({
            					showClose: true,
            					message: '删除成功!',
            					type: 'success'
        					});
						}
					})
				}
				
			},
			onSeach() {
				if(this.seach.name){
					this.actGetJobData()
				}
			},
			handleClose(done){
				//抽屉关闭之前
        		this.$confirm('确定退出前请保存修改？', '确认退出', {
          		distinguishCancelAndClose: true,
          		confirmButtonText: '确定',
          		cancelButtonText: '取消'
        		})
          		.then(() => {
          			this.editData = {}
          			done()
          		})
          		.catch(() => {
          		});
			},
			getpage(val){
				this.actGetJobData(val)
			},
			change(obj){
				console.log(obj)
				for(let key in this.zhixiang){
					this.zhixiang[key] = obj[key]
				}
				this.drawer = false
			}
		},
		computed:{
			...mapGetters(['jobSelect']),
			...mapState({
				jobData:state=>state.zwgl.tableData,
				dataCount:state=>state.zwgl.dataCount,
				seach:state=>state.zwgl.seach
			}),
		},
		created(){
			this.actGetJobData()
		}
	}
</script>